<template>
  <div>
    <!-- 查询 -->
    <div>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="活动名称/简介">
          <el-input
            v-model="searchForm.keyWord"
            placeholder="活动名称/简介"
            clearable
          />
        </el-form-item>
        <el-form-item label="起始时间">
          <el-date-picker
            v-model="searchForm.beginTime"
            type="datetime"
            placeholder="Select date and time"
            value-format="YYYY-MM-DD HH:mm:ss"
            clearable
          />
        </el-form-item>
        <el-form-item label="终止时间">
          <el-date-picker
            v-model="searchForm.endTime"
            type="datetime"
            placeholder="Select date and time"
            value-format="YYYY-MM-DD HH:mm:ss"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getGroupJoinList()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <h1>发布的拼团活动信息</h1>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="joinId" label="ID" />
      <el-table-column prop="joinName" label="活动名称" />
      <el-table-column prop="joinTip" label="拼团活动简介" width="150" />
      <el-table-column prop="unitName" label="商品单位" />
      <el-table-column prop="prodImages" label="商品轮播图">
        <template #default="scope">
          <el-carousel height="50px">
            <el-carousel-item
              v-for="item in scope.row.prodImages"
              :key="item.index"
            >
              <el-image style="width: 50px; height: 50px" :src="item" />
            </el-carousel-item>
          </el-carousel>
        </template>
      </el-table-column>
      <el-table-column prop="beginTime" label="开始时间" />
      <el-table-column prop="endTime" label="截止时间" />
      <el-table-column prop="expireTime" label="拼团时效" />
      <el-table-column prop="groupNum" label="拼团人数" />
      <el-table-column prop="buyMax" label="购买限制" />
      <el-table-column prop="virtualNum" label="补齐人数" />
      <el-table-column prop="prodPrice" label="商品原价" />
      <el-table-column prop="groupPrice" label="拼团价格" />
      <el-table-column prop="prodName" label="拼团商品" />
      <el-table-column prop="kindName" label="配送方式" />
      <el-table-column prop="payName" label="运费设置" />
      <el-table-column prop="sendMoney" label="运费" />
      <el-table-column prop="joinTop" label="排序" />
      <el-table-column prop="joinDesc" label="活动详情" width="150" />
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button
            type="primary"
            :icon="Edit"
            circle
            v-if="flag"
            @click="showUpdateDiv(scope.row)"
          />
          <el-button
            type="danger"
            :icon="Delete"
            circle
            v-if="flag"
            @click="deleteJoinActive(scope.row)"
          />
          <el-button type="primary" round>开团</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div>
      <div class="demo-pagination-block">
        <el-pagination
          v-model:current-page="searchForm.pageNum"
          v-model:page-size="searchForm.pageSize"
          :page-sizes="[1, 3, 5, 10]"
          :size="size"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 参与活动 -->
    <div>
      <el-dialog
        v-model="dialogJoinVisible"
        title="修改活动弹出框"
        width="1000"
        label-width="auto"
        :before-close="handleClose"
      >
        <el-form
          ref="ruleFormRef"
          style="max-width: 1100px"
          :v-model="joinForm"
          label-width="auto"
          :inline="true"
          class="demo-form-inline"
        >
          <el-form-item label="拼团活动名称" prop="joinName">
            <el-input v-model="joinForm.joinName" style="width: 300px" />
          </el-form-item>
          <el-form-item label="拼团活动简介" prop="joinTip">
            <el-input
              type="textarea"
              v-model="joinForm.joinTip"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="商品单位" prop="prodUnit">
            <el-select
              v-model="joinForm.prodUnit"
              placeholder="请选择"
              style="width: 150px"
            >
              <el-option
                v-for="item in untiOptions"
                :key="item.dictValue"
                :label="item.dictName"
                :value="item.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="活动轮播图" prop="images">
            <el-upload
              v-model:file-list="joinForm.images"
              action="http://127.0.0.1:10010/group/join/uploadFile"
              list-type="picture-card"
              :headers="headers"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>

            <el-dialog v-model="dialogimagesVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
          </el-form-item>
          <el-form-item label="活动开始时间">
            <el-input
              v-model="joinForm.beginTime"
              readonly
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="活动截止时间">
            <el-input
              v-model="joinForm.endTime"
              readonly
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="拼团时效">
            <el-input-number
              :min="1"
              v-model="joinForm.expireTime"
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="拼团人数">
            <el-input-number
              v-model="joinForm.groupNum"
              readonly
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="购买数量限制" prod="buyMax">
            <el-input-number
              :min="1"
              v-model="joinForm.buyMax"
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="补齐人数" prop="virtualNum">
            <el-input-number
              :min="0"
              v-model="joinForm.virtualNum"
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="商品原价" prop="prodPrice">
            <el-input-number
              :min="1"
              v-model="joinForm.prodPrice"
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="拼团价格" prop="groupPrice">
            <el-input-number
              :min="1"
              v-model="joinForm.groupPrice"
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="拼团商品" prop="prodInfoId">
            <el-select
              v-model="joinForm.prodInfoId"
              placeholder="请选择"
              style="width: 240px"
            >
              <el-option
                v-for="item in prodInfoOptions"
                :key="item.infoId"
                :label="item.prodName"
                :value="item.infoId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="配送方式" prop="sendKind">
            <el-select
              v-model="joinForm.sendKind"
              placeholder="请选择"
              style="width: 240px"
            >
              <el-option
                v-for="item in kindOptinos"
                :key="item.dictValue"
                :label="item.dictName"
                :value="item.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="运费设置" prop="sendPay">
            <el-select
              v-model="joinForm.sendPay"
              placeholder="请选择"
              style="width: 240px"
            >
              <el-option
                v-for="item in payOptions"
                :key="item.dictValue"
                :label="item.dictName"
                :value="item.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="运费" prop="sendMoney">
            <el-input-number
              :min="0"
              v-model="joinForm.sendMoney"
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="活动详情" prop="joinDesc">
            <el-input
              type="textarea"
              v-model="joinForm.joinDesc"
              style="width: 800px"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogJoinVisible = false">取消</el-button>
            <el-button type="primary" @click="updateJoinActive()">
              提交
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import {
  joinActiveListService,
  updateJoinActiveService,
  deleteGroupJoinService,
  addGroupJoinService,
} from "../api/group/join";
import { ElMessage, ElMessageBox } from "element-plus";
import type { UploadProps, UploadUserFile } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { selectProdInfoService, selectDictByService } from "../api/prod";
import type { ComponentSize } from "element-plus";
const dialogJoinVisible = ref(false);
const headers = ref({
  token: sessionStorage.getItem("token"),
});
const joinForm = ref({
  activeId: 0,
  beginTime: "",
  buyMax: null,
  endTime: "",
  expireTime: null,
  groupNum: null,
  groupPrice: null,
  joinDesc: "",
  joinId: 0,
  joinImages: "",
  prodImages: [],
  joinName: "",
  joinTip: "",
  joinTop: 1,
  prodInfoId: null,
  prodPrice: null,
  prodUnit: null,
  sendKind: null,
  sendMoney: null,
  sendPay: null,
  virtualNum: null,
  images: [],
});
const showUpdateDiv = (row: any) => {
  joinForm.value = {
    activeId: row.activeId,
    beginTime: row.beginTime,
    buyMax: row.buyMax,
    endTime: row.endTime,
    expireTime: row.expireTime,
    groupNum: row.groupNum,
    groupPrice: row.groupPrice,
    joinDesc: row.joinDesc,
    joinId: row.joinId,
    joinImages: row.joinImages,
    prodImages: row.prodImages,
    joinName: row.joinName,
    joinTip: row.joinTip,
    joinTop: row.joinTop,
    prodInfoId: row.prodInfoId,
    prodPrice: row.prodPrice,
    prodUnit: row.prodUnit,
    sendKind: row.sendKind,
    sendMoney: row.sendMoney,
    sendPay: row.sendPay,
    virtualNum: row.virtualNum,
    images: [],
  };
  dialogJoinVisible.value = true;
};
const dialogImageUrl = ref("");
const dialogimagesVisible = ref(false);

const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogimagesVisible.value = true;
};

const updateJoinActive = () => {
  joinForm.value.images.forEach((item) => {
    joinForm.value.prodImages.push(item.response.data);
  });
  updateJoinActiveService(joinForm.value).then((res) => {
    if (res.data.flag) {
      ElMessage.success("修改成功");
      dialogJoinVisible.value = false;
      getGroupJoinList();
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};

const deleteJoinActive = (row: any) => {
  deleteGroupJoinService(row).then((res) => {
    if (res.data.flag) {
      ElMessage.success("删除成功");
      getGroupJoinList();
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};
const tableData = ref([]);
const searchForm = ref({
  beginTime: "",
  endTime: "",
  keyWord: "",
  maxValue: 0,
  minValue: 0,
  pageNum: 1,
  pageSize: 5,
  statusId: 0,
  typeId: 0,
});
const total = ref(0);
const size = ref<ComponentSize>("default");
const background = ref(false);
const disabled = ref(false);

const handleSizeChange = (val: number) => {
  searchForm.value.pageSize = val;
  getGroupJoinList();
};
const handleCurrentChange = (val: number) => {
  searchForm.value.pageNum = val;
  getGroupJoinList();
};
const getGroupJoinList = () => {
  joinActiveListService(searchForm.value).then((res) => {
    if (res.data.flag) {
      tableData.value = res.data.data.records;
      total.value = res.data.data.total;
    }
  });
};
const prodInfoOptions = ref([]);
const getProdInfoList = () => {
  selectProdInfoService().then((res) => {
    if (res.data.flag) {
      prodInfoOptions.value = res.data.data;
    }
  });
};

const untiOptions = ref([]);
const getUnitList = () => {
  selectDictByService(2).then((res) => {
    if (res.data.flag) {
      untiOptions.value = res.data.data;
    }
  });
};
const kindOptinos = ref([]);
const getKindList = () => {
  selectDictByService(15).then((res) => {
    if (res.data.flag) {
      kindOptinos.value = res.data.data;
    }
  });
};
const payOptions = ref([]);
const getPayList = () => {
  selectDictByService(16).then((res) => {
    if (res.data.flag) {
      payOptions.value = res.data.data;
    }
  });
};

onMounted(() => {
  getGroupJoinList();
  getProdInfoList();
  getUnitList();
  getKindList();
  getPayList();
});
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";
</script>
<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
